<template>
	<view class="">
         
		 <u-tabs :list="nav" :is-scroll="false" :current="current" @change="change" active-color="#333"
				inactive-color="#333" :bg-color="{background:'transparent'}"></u-tabs>
		 
		<view v-for="(item,index) in list " :key="index"
			:class="item.status==0?'base-coupons_gray':item.status==1?'base-coupons':item.status==2?'base-coupons change':''"
			class="vouch u-flex">
			<view  class="u-flex-3.8 u-text-center" style="color: #fff;">
				<view >
					<text>￥</text>
					<text style="font-size: 90rpx;">{{item.price}}</text>
				</view>
				<view class="">
				   满{{item.price}}元可用	
				</view>
			</view>
			<view class="u-flex-6.2" style="padding-left: 60rpx;">
				<view style="font-weight: bold;font-size: 34rpx;">{{item.price}}元优惠券</view>
				<view style="color: #bebebe;margin: 20rpx 0;">说明:{{item.price}}</view>
				<view style="color: #bebebe;"> 期限:{{item.price}}</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				nav: [{
									name: '待收货'
								}, {
									name: '待付款'
								}, {
									name: '待评价',
									
								}],
								current: 0,
				list: [{
					status: 0,
					price:"50"
				}, {
					price:"50",
					status: 1
				}, {
					price:"50",
					status: 2
				}]
			}
		},
		onLoad() {
			this.jiazai()
		},
		onShow() {

		},
		methods: {
			jiazai() {
				this.$u.post('/api/index/banner', {

				}).then(res => {
					this.banner = res
				}).catch(err => {

				})
			},
			change(index) {
							this.current = index;
						}
		}
	}
</script>

<style>
	page {
		background: #F1F1F1;

	}


	.base-coupons {
		width: 690rpx;
		height: 200rpx;

		position: relative;
		background: radial-gradient(circle at left 100rpx, transparent 20rpx, #FF5D39 0) top left / 240rpx 51% no-repeat,
			radial-gradient(circle at left 0rpx, transparent 20rpx, #FF5D39 0rpx) bottom left /240rpx 51% no-repeat,
			radial-gradient(circle at right 100rpx, transparent 20rpx, #fff 0rpx) top right /450rpx 51% no-repeat,

			radial-gradient(circle at right 0rpx, transparent 20rpx, #fff 0) bottom right /450rpx 51% no-repeat;
		/* filter: drop-shadow(3rpx 3rpx 3rpx rgba(0, 0, 0, .3)); */
		margin: auto;
	}

	.change {
		opacity: 0.4;
	}


	.base-coupons::after {
		content: '';
		position: absolute;
		height: 100%;
		width: 10rpx;
		top: 0;
		left: 238rpx;
		background-image: linear-gradient(to bottom, #FF5D39 10rpx, transparent 10rpx, transparent),
			radial-gradient(20rpx circle at 10rpx 20rpx, transparent 10rpx, #FF5D39 0rpx);
		background-size: 10rpx 30rpx;
	}

	.base-coupons_gray {
		width: 690rpx;
		height: 200rpx;

		position: relative;
		background: radial-gradient(circle at left 100rpx, transparent 20rpx, #C8C8C8 0) top left / 240rpx 51% no-repeat,
			radial-gradient(circle at left 0rpx, transparent 20rpx, #C8C8C8 0rpx) bottom left /240rpx 51% no-repeat,
			radial-gradient(circle at right 100rpx, transparent 20rpx, #fff 0rpx) top right /450rpx 51% no-repeat,

			radial-gradient(circle at right 0rpx, transparent 20rpx, #fff 0) bottom right /450rpx 51% no-repeat;
		filter: drop-shadow(3rpx 3rpx 3rpx rgba(0, 0, 0, .3));
		margin: auto;
	}


	.base-coupons_gray::after {
		content: '';
		position: absolute;
		height: 100%;
		width: 10rpx;
		top: 0;
		left: 238rpx;
		background-image: linear-gradient(to bottom, #C8C8C8 10rpx, transparent 0rpx, transparent),
			radial-gradient(20rpx circle at 10rpx 20rpx, transparent 10rpx, #C8C8C8 0rpx);
		background-size: 10rpx 30rpx;
	}


	.vouch {
		margin-top: 20rpx;
	}
</style>
